<!-- 示例核心代码(3/3) -->
<template>
    <el-dialog class="ba-operate-dialog" v-model="baTable.table.extend!.showAfter" width="50%" >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">售后</div>
        </template>



        <el-scrollbar  class="ba-table-form-scrollbar">

            <div  class="info-box ba-markdown">
                <div v-if="baTable.table.extend!.infoData">


                    <!--                <el-steps style="max-width: 100%;margin-bottom: 15px;margin-top: -25px;" :active="baTable.table.extend!.infoData.step_num" align-center>-->
                    <!--                    <el-step v-for="(item, index) in baTable.table.extend!.infoData.step_array"  :title="item.title"  />-->
                    <!--                </el-steps>-->

                    <el-descriptions style="margin-top: -40px;"
                        class="margin-top"
                        :column="2"
                        size="default"
                        border
                    >

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    订单号
                                </div>
                            </template>
                            {{baTable.table.extend!.infoData.order_no}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    支付单号
                                </div>
                            </template>
                            {{baTable.table.extend!.infoData.pay_order}}
                        </el-descriptions-item>


                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    课程售价
                                </div>
                            </template>
                            {{baTable.table.extend!.infoData.price}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    会员优惠
                                </div>
                            </template>
                            {{baTable.table.extend!.infoData.vip_price}}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    支付金额
                                </div>
                            </template>
                            {{baTable.table.extend!.infoData.pay_money}}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    申请时间
                                </div>
                            </template>
                            {{baTable.table.extend!.infoData.sub_after_time}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    售后理由
                                </div>
                            </template>
                            {{baTable.table.extend!.infoData.after_reason}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    售后凭证
                                </div>
                            </template>

                            <el-image v-for="(v,i) in  baTable.table.extend!.infoData.after_images"
                                      style="width: 50px; height: 50px"
                                      :src="baTable.table.extend!.infoData.after_images[i]"
                                      :zoom-rate="1.2"
                                      :max-scale="7"
                                      :min-scale="0.2"
                                      :preview-src-list="baTable.table.extend!.infoData.after_images"
                                      :initial-index="i"
                                      fit="cover"
                            />

                        </el-descriptions-item>
                        <el-descriptions-item v-if="baTable.table.extend!.infoData.after_status >= 2">
                            <template #label>
                                <div class="cell-item">
                                    审核状态
                                </div>
                            </template>
                            {{baTable.table.extend!.infoData.after_status == 2 ? '通过' : '驳回'}}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="baTable.table.extend!.infoData.after_check_time">
                            <template #label>
                                <div class="cell-item">
                                    审核时间
                                </div>
                            </template>
                            {{baTable.table.extend!.infoData.after_check_time}}
                        </el-descriptions-item>

                        <el-descriptions-item v-if="baTable.table.extend!.infoData.reject_reason">
                            <template #label>
                                <div class="cell-item">
                                    驳回理由
                                </div>
                            </template>
                            {{baTable.table.extend!.infoData.reject_reason}}
                        </el-descriptions-item>

                        <el-descriptions-item v-if="baTable.table.extend!.infoData.refund_money">
                            <template #label>
                                <div class="cell-item">
                                    退款金额
                                </div>
                            </template>
                            {{baTable.table.extend!.infoData.refund_money}}
                        </el-descriptions-item>




                    </el-descriptions>

                </div>
            </div>

        <div
            class="ba-operate-form ba-Add-form"
        >
            <el-form
                :model="baTable.form.items"
                :label-width="baTable.form.labelWidth + 'px'"
            >
                <FormItem label="审核状态" v-if="baTable.table.extend!.infoData.after_status == 1" type="radio"  v-model="after_status_" prop="after_status" :data="{ content: {  '2': '通过', '3': '驳回' }}"  />

                <FormItem label="退款金额" v-if="baTable.table.extend!.infoData.after_status == 1 && after_status_ == 2" style="width: 50%" type="number" prop="refund_money" :input-attr="{ step: 1 }" v-model.number="refund_money_"  />

                <FormItem label="驳回理由" v-if="baTable.table.extend!.infoData.after_status == 1 && after_status_ == 3" style="width: 80%"  type="textarea" v-model="reject_reason_" prop="reject_reason" :input-attr="{ rows: 3 }"  />

            </el-form>
        </div>

        </el-scrollbar>

        <template #footer v-if="baTable.table.extend!.infoData?.after_status == 1">
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">

                <el-button @click="baTable.table.extend!.showAfter = false">取消</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="subAfter" type="primary">
                    提交
                </el-button>
            </div>
        </template>

    </el-dialog>
</template>

<script setup lang="ts">
import {inject, ref} from 'vue'
import { timeFormat } from '/@/utils/common'
import type baTableClass from '/@/utils/baTable'
import FormItem from "/@/components/formItem/index.vue";
import {t} from "@wangeditor/editor";
import createAxios from "/@/utils/axios";
import {ElMessage} from "element-plus";

const baTable = inject('baTable') as baTableClass



const after_status_ = ref();
const refund_money_ = ref();
const reject_reason_ = ref();
const subAfter = () => {
    createAxios({
        url: '/admin/courseorder/after',
        method: 'post',
        data: {
            id:baTable.table.extend!.infoData.id,
            after_status:after_status_.value,
            refund_money:refund_money_.value,
            reject_reason:reject_reason_.value,
        }
    }, {
        loading: true
    }, {
        text: '提交中...'
    })
        .then((res) => {
            if (res.code == 1) {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
                baTable.onTableHeaderAction('refresh', {})
                baTable.table.extend!.showAfter = false;
            } else {
                ElMessage({
                    message: res.msg,
                    type: 'error',
                })
            }


        })
        .catch((resx) => {
        })
}


</script>

<style scoped lang="scss">
.info-box {
    margin-top: 60px;
    div {
        width: 100%;
        text-align: center;
    }
    .mt-40 {
        margin-top: 40px;
    }
}
:deep(.ba-markdown table tr:hover){
    background-color: inherit ;
}
</style>
